<template>
    <div class="Homechir">
      <div class="content">
        <p style="width: 100%;color: #242526;font-size: 22px;font-weight:500;padding:5px 0 0 25px;text-align: center;line-height: 45px;margin:0;">订单详情 </p>
        <!--  订单信息  -->
        <div class="main">
			<p class="title">订单信息</p>
          <div class="Homechir-one" style="padding: 10px 0;">
            <div style="width: 380px;float: left;">
              <p style="width: 350px;margin:0;margin-left: 20px;color: #242526;font-size: 13px;line-height: 30px;height: 30px;">订单号: {{ count.orderNumber ? count.orderNumber : '暂无订单号' }}</p>
              <p style="width: 350px;margin:0;margin-left: 20px;color: #242526;font-size: 13px;line-height: 30px;height: 30px;">收货人: {{ count.receiverName ? count.receiverName : '暂无收货人' }}</p>
              <p style="width: 350px;margin:0;margin-left: 20px;color: #242526;font-size: 13px;line-height: 30px;height: 30px;">联系电话: {{ count.receiverPhone ? count.receiverPhone : '暂无联系电话' }}</p>
              <p style="width: 350px;margin:0;margin-left: 20px;color: #242526;font-size: 13px;line-height: 30px;height: 30px;">收货地址: {{ count.detailAddress ? count.detailAddress : '暂无收货地址'}}</p>
              <p style="width: 350px;margin:0;margin-left: 20px;color: #242526;font-size: 13px;line-height: 30px;height: 30px;">支付方式: {{ count.tradingChannels === 0 ? '微信支付' : (count.tradingChannels === 1 ? '支付宝支付' : '线下支付') }}</p>
            </div>
            <div style="width: calc(100% - 380px);float: left;padding: 0 40px;border-left: 1px solid #E4E9EE;">
              <p v-if="count.distributionType == 2 && count.distributionStatus == 6 " style="float: left;margin: auto;color: #F56C6C;font-size: 21px;height: 35px;line-height: 35px">待取药</p>
              <p v-else style="float: left;margin: auto;color: #F56C6C;font-size: 21px;height: 35px;line-height: 35px">{{count.distributionStatus | capitalize }}</p>
              <div style="float: right;">
                <p style="margin:0;margin-left: 20px;color: #242526;font-size: 13px;height: 30px;">承运人: {{count.expressName ? count.expressName : '暂无承运人'}}</p>
                <p style="margin:0;margin-left: 20px;color: #242526;font-size: 13px;height: 30px;">运单号: {{count.expressCode ? count.expressCode : '暂无运单号'}}</p>
                <Button type="primary" v-if="count.expressCode" style="font-size: 14px;border-radius:10px;line-height: 20px;float:right;" @click="cahidwhawuliu(count.expressCode)">运单详情</Button>
                <Button disabled v-if="!count.expressCode" style="font-size: 14px;border-radius:10px;line-height: 20px;float:right;">暂无运单详情</Button>
              </div>
              <div class="time" style="width:100%;margin:0 auto 10px;padding-top: 10px;float: left;">
                <span style="width:22%;display:inline-block;text-align:left">{{count.doctorTime?count.doctorTime:''}}</span>
                <span style="width:22%;display:inline-block;text-align:left">{{count.ysshTime?count.ysshTime:''}}</span>
                <span style="width:22%;display:inline-block;text-align:left">{{count.notifyTime?count.notifyTime:''}}</span>
                <span style="width:19%;display:inline-block;text-align:left;">{{count.doctorFyTime?count.doctorFyTime:''}}</span>
                <span style="display:inline-block;text-align:left"  v-if="distrcode == 8">{{count.endTime?count.endTime:''}}</span>
              </div>
              <Steps :current="currentnum" align-center status="wait">
                <Step title="医生开具处方" :content="count.doctorName ? count.doctorName : ''" style="width: auto"></Step>
                <Step title="药剂师审方" :content="count.ysshName ? count.ysshName : ''" style="width: auto"></Step>
                <Step title="药店接收订单" :content="count.ysshName ? count.ysshName :''" style="width: auto"></Step>
                <Step title="调配审核发药" :content="count.doctorFyName?count.doctorFyName :''" style="width: auto"></Step>
                <Step title="订单超时未支付" v-if="distrcode === 13" :content="count.receiverName?count.receiverName :''" style="width: auto"></Step>
                <Step title="用户确认收药" v-else :content="count.receiverName?count.receiverName :''" style="width: auto"></Step>
              </Steps>
            </div>
          </div>
         </div>
        <!--  处方明细  -->
        <div class="main">
				  <p class="title">处方明细</p>
          <div class="Homechir-sel" style="padding-top: 10px;min-height: 160px;margin-bottom: 20px">
            <div style="width: 380px;min-height: 150px;float: left;border-right: 1px solid #E4E9EE;">
              <Button type="primary" style="font-size: 13px;border-radius:10px;line-height: 10px;float:right;margin-right:10px" @click="search(count.rxId)">查看处方笺</Button>
              <p style="width: 350px;margin:0;margin-left: 20px;color: #242526;font-size: 13px;line-height: 30px;height: 30px;">处方编号: {{ count.rxId ? count.rxId : '暂无订单号' }}</p>
              <p style="width: 350px;margin:0;margin-left: 20px;color: #242526;font-size: 13px;line-height: 30px;height: 30px;text-overflow: ellipsis;
                white-space: nowrap;overflow: hidden;" :title="count.assessmentcontent? count.assessmentcontent : '诊断结果' ">诊断结果:&nbsp;&nbsp;{{count.assessmentcontent? count.assessmentcontent : '诊断结果' }}</p>
              <p style="width: 350px;margin:0;margin-left: 20px;color: #242526;font-size: 13px;line-height: 30px;height: 30px;">订单药品金额: &nbsp;&nbsp;{{ count.amt }}</p>
              <p style="width: 350px;margin:0;margin-left: 20px;color: #242526;font-size: 13px;line-height: 30px;height: 30px;">订单配送金额: &nbsp;&nbsp;{{ count.distributionFee ? count.distributionFee : '0' }}</p>
              <p style="width: 350px;margin:0;margin-left: 20px;color: #242526;font-size: 13px;line-height: 30px;height: 30px;">订单支付总金额: &nbsp;&nbsp;{{ count.drugMoney ? count.drugMoney : '0' }}</p>
            </div>
            <div style="width: calc(100% - 380px);float: left;">
              <!-- <p style="width: 90%;margin: 0 auto 0 auto;color: #242526;font-size: 16px;line-height: 30px;height: 30px;margin-top: 10px">药品清单</p> -->
              <div style="width: 90%;margin: 0 auto 0 auto;text-align: center">
                <Table
                  :columns="columns1"
                  :data="data2"
                  border
                  style="width: 100%;text-align: center;margin-top:10px"
                  :header-cell-style="{background:'#FAFAFA',color:'#242526',border: '1px solid #E8E8E8 !important','text-align': 'center',height: '30px !important', padding: '8px 0'}"
                  :cell-style="{background:'#ffffff',color:'#242526',border: '1px solid #E8E8E8 !important','text-align': 'center',height: '30px !important', padding: '8px 0'}"
                ></Table>
              </div>
            </div>
            <div style="clear: both"></div>
          </div>
        </div>
        <!--  处方驳回信息  -->
        <div class="main" v-show="distributionStatus == 1 && count.createTime">
				  <p class="title">处方驳回信息</p>
          <div class="Homechir-sel" style="padding-top: 10px;">
            <div style="width: 380px;height: 180px;float: left;border-right: 1px solid #E4E9EE;">
              <!-- <p style="width: 350px;margin:0;margin-left: 20px;color: #242526;font-size: 16px;line-height: 30px;height: 30px;margin-top: 10px">处方驳回信息</p> -->
              <p style="width: 350px;margin:0;margin-top: 10px;margin-left: 20px;color: #242526;font-size: 13px;line-height: 22px;height: 22px;">驳回原因: {{ count.rejectReason === '1' ? '处方不合规' : (count.rejectReason === '2' ? '用药不适宜' : '超长处方') }}</p>
              <p style="width: 350px;margin:0;margin-left: 20px;color: #242526;font-size: 13px;line-height: 30px;height: 30px;">驳回时间: {{ count.createTime ? count.createTime : '暂无驳回时间' }}</p>
            </div>
            <div style="width: calc(100% - 380px);float: left;">
              <p style="width: 90%;margin: 0 auto 0 auto;color: #242526;font-size: 14px;line-height: 25px;min-height: 60px;margin-top: 50px">驳回原因详细说明：{{ count.reportType ? count.reportType : '暂无驳回原型详细说明' }}</p>
            </div>
          </div>
        </div>
        <!--  退款信息  -->
        <div class="main" v-show="count.distributionStatus === 10 || count.distributionStatus === 11" >
				  <p class="title">退款信息</p>
          <div class="Homechir-sel" style="padding-top: 10px;height: 225px">
            <div v-if="refundEntity" style="width: 380px;height: 205px;float: left;border-right: 1px solid #E4E9EE;">
              <!-- <p style="width: 350px;margin:0;margin-left: 20px;color: #242526;font-size: 16px;line-height: 30px;height: 30px;margin-top: 10px">退款信息</p> -->
              <p style="width: 350px;margin:0;margin-top: 10px;margin-left: 20px;color: #242526;font-size: 13px;line-height: 22px;height: 22px;">订单编号: {{ refundEntity.orderNumber ? refundEntity.orderNumber : '暂无订单编号' }}</p>
              <p style="width: 350px;margin:0;margin-left: 20px;color: #242526;font-size: 13px;line-height: 30px;height: 30px;">退款发起: 用户发起</p>
              <p style="width: 350px;margin:0;margin-left: 20px;color: #242526;font-size: 13px;line-height: 30px;height: 30px;">退款人: {{ refundEntity.memberName ? refundEntity.memberName : '暂无退款人' }}</p>
              <p style="width: 350px;margin:0;margin-left: 20px;color: #242526;font-size: 13px;line-height: 30px;height: 30px;">联系电话: {{ refundEntity.memberTelephone ? refundEntity.memberTelephone : '暂无联系电话' }}</p>
              <p style="width: 350px;margin:0;margin-left: 20px;color: #242526;font-size: 13px;line-height: 30px;height: 30px;">退款原因: {{ refundEntity.reason ? refundEntity.reason : '暂无退款原因' }}</p>
            <p style="width: 350px;margin:0;margin-left: 20px;color: #242526;font-size: 13px;line-height: 30px;height: 30px;">退款时间: {{ refundEntity.createTime	 }}</p>
            </div>
            <div v-if="refundEntity" style="width: calc(100% - 380px);float: left;padding: 0 40px;">
              <p style="float: left;margin: auto;color: #F56C6C;font-size: 21px;height: 35px;line-height: 35px">{{refundEntity.orderStatus  === 0 ? '申请中' : (refundEntity.orderStatus === 1 ? '已退款' : (refundEntity.orderStatus === 2 ? '拒绝退款' : (refundEntity.orderStatus === 3 ? '退款中' : '同意退款'))) }}</p>
              <div class="time" style="width:100%;margin:0 auto 10px;padding-top: 10px;float: left;">
                <span style="width:22%;display:inline-block;text-align:left">{{count.createTime?count.createTime:''}}</span>
                <span style="width:22%;display:inline-block;text-align:left">{{refundEntity.createTime?refundEntity.createTime:''}}</span>
                <span style="width:22%;display:inline-block;text-align:left">{{refundEntity.pharmacyAuditorTime?refundEntity.pharmacyAuditorTime:''}}</span>
                <span style="width:21%;display:inline-block;text-align:left;">{{refundEntity.auditorTime?refundEntity.auditorTime:''}}</span>
                <span style="display:inline-block;text-align:left">{{refundEntity.auditorTime?refundEntity.auditorTime:''}}</span>
              </div>
              <Steps :current="distrcode === 4 ? 0 : (distrcode === 5 || distrcode === 6 || distrcode === 7 ? 3 : 4)" align-center process-status="wait">
                <Step title="药店接收订单" style="width: auto" icon="ios-checkmark"></Step>
                <Step title="用户申请退款" style="width: auto" icon="ios-checkmark"></Step>
                <Step title="药店退款审核" :content="refundEntity.pharmacyAuditor?refundEntity.pharmacyAuditor:''" style="width: auto" icon="ios-checkmark"></Step>
                <Step title="运营端审核" :content="refundEntity.auditor?refundEntity.auditor:''" style="width: auto" icon="ios-checkmark"></Step>
                <Step title="用户退款成功" style="width: auto" icon="ios-checkmark"></Step>
              </Steps>
            </div>
          </div>
        </div>
        <div>
          <Button size="small" style="display: block;width: 100px;height: 40px;line-height: 0;margin: 25px auto;" @click="handleitemback">
            <i class = "iconfont icon-butongyi" style="font-size:14px;margin-right:5px"></i> 返回
          </Button>
        </div>

        <Modal
          v-model="fundcode"
          title="订单详情"
          :footer="null"
          styles="padding: none;margin: none"
          >
          <div style="margin: -16px;padding: 10px 0;width:100%">
              <div style="width:100%;height:40px;background-image: linear-gradient(to right, #07a6a5 , #fff);">
                <p style="padding-left:25px;line-height:40px;font-size:16px;color:#fff">承运人：顺丰快递 <span style="padding-left:20px;color:#fff">运单号：</span> {{count.expressCode}}</p>
              </div>
              <!-- <div v-show="!count.expressCode" style="width: 200px;margin: auto;height: 78px;line-height:78px;">
                <img src="@/assets/basic1.png" alt="" style="display: block;width: 40px;height: 40px;margin-top: 65px;">
                <span style="display: block;font-size: 14px;color: #888888">暂无相关的物流信息</span>
              </div> -->
              <div class="wuliu" style="margin-top: 10px;padding-left:25px;width:100%">
                <Steps direction="vertical"  process-status="wait" style="display:flex;flex-direction:column">
                  <Step v-for="item in wulist" :key="item.opcode" :title="item.acceptTime" :content = "item.remark" icon="ios-checkmark" ></Step>
                </Steps>
              </div>
          </div>
          <div slot="footer" style="text-align:center">
            <Button @click="fundcode = false">
              <i class = "iconfont icon-butongyi" style="font-size:14px;margin-right:5px"></i>取消
            </Button>
          </div>
        </Modal>
        <Modal
          v-model="madecode"
          title="电子处方"
          :footer="null"
          styles="padding: none;margin: none"
          >
          <div class="PerMask">
            <div class="PerMask-com">
              <div class="com-right" :style="codes">
                    <div class="header">
                        <p>{{clinic.hospitalName}}</p>
                        <p>电子处方笺</p>
                        <p>普通药品处方</p>
                        <img v-if="!clinic.twoDimensionCode" src="../../../assets/images/ele-code.png" alt="">
                        <img v-if="clinic.twoDimensionCode" :src="clinic.twoDimensionCode" alt="">
                        <div class="nub">
                            <span style="float:left"><b>门诊号</b>&nbsp;:&nbsp;{{clinic.clinicNumber}}</span>
                            <span style="float:right"><b>处方号</b>&nbsp;:&nbsp;{{clinic.rxNumber}}</span>
                        </div>
                    </div>
                    <div class="line"></div>
                    <div class="essential">
                        <span>姓名&nbsp;:&nbsp;<small>{{clinic.name}}</small></span>
                        <span>性别&nbsp;:&nbsp;<small>{{clinic.gender === 1 ? '男':clinic.gender === 2?'女':'其他'}}</small></span>
                        <span>年龄&nbsp;:&nbsp;<small>{{clinic.age}}岁</small></span>
                        <span>联系电话&nbsp;:&nbsp;<small>{{clinic.telephone}}</small></span>
                        <span>身份证号&nbsp;:&nbsp;<small>{{clinic.idcard}}</small></span>
                        <span>开单科室&nbsp;:&nbsp;<small>{{clinic.doctorDeptName}}</small></span>
                        <span>开单医生&nbsp;:&nbsp;<small>{{clinic.doctorName}}</small></span>
                        <span>费别&nbsp;:&nbsp;<small>{{ clinic.paytypeName ? clinic.paytypeName : '自费'}}</small></span>
                        <span v-if="clinic.address">地址&nbsp;:&nbsp;<small>{{clinic.address}}</small></span>
                    </div>
                    <div class="result">
                        <p class="title">诊断结果</p>
                        <div class="text dhei">
                            {{ clinic.assessmentcontent ? clinic.assessmentcontent : '暂无' }}
                        </div>
                        <p class="title">RP</p>
                        <div v-for="(rps,index) in rpList" :key="rps.id">
                            <span style="font-size:16px">{{index+1}}.</span>
                            <p class="tt" style="margin:5px 0">{{rps.name}}&nbsp;{{rps.spec}}&nbsp;X{{rps.dose}}{{rps.doseunit}}</p>
                            <p class="nub">用法用量&nbsp;:&nbsp;&nbsp;{{rps.route}}&nbsp;{{rps.singledose}}{{rps.singledoseunit}}/次&nbsp;&nbsp;{{rps.frequency}}&nbsp;{{rps.period}}天</p>
                            <p class="nub">备注&nbsp;:&nbsp;&nbsp;{{rps.medicalAdvice || '无'}}</p>
                            <img src="../../../assets/images/zhang.png" alt="">
                        </div>
                    </div>
                    <div class="line"></div>
                    <div class="physician">
                        <span v-if="!clinic.prescriptionSignature">处方医师&nbsp;:&nbsp;<small>{{ clinic.doctorName}}</small></span>
                        <span v-if="clinic.prescriptionSignature">处方医师&nbsp;:&nbsp;<img  :src="clinic.prescriptionSignature" /></span>
                        <span v-if="!clinic.prescriptionReview">处方审核&nbsp;:&nbsp;<small >{{ clinic.qdDocname}}</small></span>
                        <span v-if="clinic.prescriptionReview">处方审核&nbsp;:&nbsp;<img :src="clinic.prescriptionReview" /></span>
                        <span v-if="!clinic.fyDoctorSignature">药品调配&nbsp;:&nbsp;<small >{{clinic.fyDoctor}}</small></span>
                        <span v-if="clinic.fyDoctorSignature">药品调配&nbsp;:&nbsp;<img :src="clinic.fyDoctorSignature" /></span>
                        <span>电子处方时间&nbsp;:&nbsp;<small>{{clinic.createtime}}</small></span>
                    </div>
                </div>

            </div>
          </div>

          <div slot="footer" style="text-align:center">
            <Button @click="madecode = false">
              <i class = "iconfont icon-butongyi" style="font-size:14px;margin-right:5px"></i>取消
            </Button>
          </div>
        </Modal>
      </div>
    </div>
</template>

<script>
import api from "@/api/commonApi";
export default {
	name: 'Phachir',
  data() {
      return {
        status: -1,
        distrcode: null,
        columns1: [
          // { title: "药品编码", key: "id", align: "center"},
          { title: '排序', key: 'sum', width: 80, align: 'center', },
          { title: "药品名称", key: "name", align: "center"},
          { title: "药品规格", key: "spec", align: "center"},
          { title: "剂型", key: "ypjx", align: "center"},
          { title: "单位", key: "doseunit", align: "center"},
          { title: "单价（元）", key: "price", align: "center"},
          { title: "数量", key: "dose", align: "center"},
          { title: "小计（元）", key: "money", align: "center",
            render:(h,params) => {
              let price = params.row.price||0
              let itemdose = params.row.dose||0
              let money = 0
              return [
                h('div', money = Number(price) * Number(itemdose))
              ]
            }
          },
        ],
        data2: [],
        count: {},
        refundEntity: {},
        wuliumask: false,
        fundcode: false,
        madecode: false,
        clinic: {},
        people: {},
        rpList: {},
        wulist: {},
        currentnum: 0,
      }
  },
  created() {
    let breadList = [
      { path: "/index", title: "首页" },
      {
        path: "",
        title: "处方管理"
      },
      {
        path: "operation/prescriptionmanage/ordersearch/review",
        title: "订单详情"
      }
    ];
    this.$emit("changeBreadList", breadList);
  },
  mounted () {
	  this.ishomeget()
  },
  filters: {
    capitalize(val) {
      switch (val) {
        case 4:
          return '待支付';
        case 5:
          return '待取药';
        case 6:
          return '待配送';
        case 7:
          return '待收货';
        case 8:
          return '已完成';
        case 10:
          return '无效处方';
        case 11:
          return '已退费';
        default:
          return '超时未支付';
      }
    }
  },
  methods: {
    ishomeget() {
      const map = {
        examineId: this.$route.query.id
      }
      this.$axios
        .post(api.getDrugOrderDetails, map)
        .then(res => {
          if (res.data.code === 1) {
            this.count = res.data.object;
            this.status = parseInt(res.data.object.status);
            this.distrcode = parseInt(res.data.object.distributionStatus);
            if(this.distrcode == 8 && this.count.endTime){
							this.currentnum = 4
						} else  {
							if(this.count.doctorFyTime ) {
								this.currentnum = 3
							} else {
								if(this.count.notifyTime){
									this.currentnum = 2
								} else {
									if(this.count.ysshTime){
										this.currentnum = 1
									} else {
										this.currentnum = 0
									}
								}
							}
						}
            this.data2 = res.data.object.clinicBillEntityList.rpList;
            if(this.data2){
							this.data2.forEach((item,index) => {
								item.sum = this.addZeros(index);
							})
						}
            this.refundEntity = res.data.object.refundEntity;
          } else {
            this.$Message.error("请求异常");
          }
        })
    },
    //运单详情
    cahidwhawuliu(counts) {
      console.log(counts)
      this.fundcode = true
      // const map = {
      //   expNo: counts
      // }
      let params = {
          expNo: counts
        }
      // let data = {version: this.$store.state.version,uri:api.getOrderTraces,method:"POST",params:params}
      // axios.post("/api",{'data':data}).then(res => {

      this.$axios.post(api.getOrderTraces, params)
        .then(res => {
          if (res.data.code === 1) {
            // this.wuliumask = false
            var andlist = JSON.parse(res.data.message)
            console.log(andlist)
            andlist.sort((a, b) => a.opcode > b.opcode ? -1 : 1)
            this.wulist = andlist
          } else {
            this.$Message.error(res.data.message || "请求异常");
          }
        })
    },
    //电子处方详情
    search(rxId){
        this.madecode = true
        const map = {
          rxId:rxId
        }
        this.$axios
        .post(api.findRxDetailByclinicId, map)
        .then(res => {
          console.log(clinicId)
          if (res.data.code === 1) {
              this.clinic = res.data.object;
              this.rpList = res.data.object.rpList
              if(this.clinic.prescriptionSignature){this.clinic.prescriptionSignature = this.fileBaseUrl + JSON.parse(res.data.object.prescriptionSignature).smallFileName}
              if(this.clinic.prescriptionReview){this.clinic.prescriptionReview = this.fileBaseUrl + JSON.parse(res.data.object.prescriptionReview).smallFileName}
              if(this.clinic.fyDoctorSignature){this.clinic.fyDoctorSignature = this.fileBaseUrl + JSON.parse(res.data.object.fyDoctorSignature).smallFileName}
              if(this.clinic.twoDimensionCode){this.clinic.twoDimensionCode = this.fileBaseUrl + JSON.parse(res.data.object.twoDimensionCode).smallFileName}
          } else {
            this.$Message.error(res.data.message || "请求异常");
          }
        })
    },
    handleitemback() {
      this.$router.back()
    }
  }
}
</script>

<style lang="less" scoped>
  .ivu-steps {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    font-size: 0;
    line-height: 1.5;
  }
  .ivu-steps-item:last-child{
    flex: none !important;
  }
  .Homechir .ivu-steps-item{
    display: inline-block;
    position: relative;
    vertical-align: top;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    overflow: hidden;
  }
  .Homechir {
    width: 100%;
    min-width: 1000px;
    padding-bottom: 25px;
    .content{
      width: calc(100% );
      margin: auto;
      background-color: #fff;
      padding-bottom: 15px;
    }
    .Homechir-one,
    .Homechir-sel{
      width: calc(100% - 20px);
      margin: auto;
      // margin-top: 25px;
      min-height: 200px;
      background-color: white;
    }

  }
       .PerMask{
          width: 100%;
          height: 100%;
          padding: 0;
		      margin: 0;
          .PerMask-com{
            padding-bottom: 30px;
            background-size:cover;
            position: relative;
            top:0;
            left:0;
            overflow: scroll;
            background-image: url('../../../assets/images/report_bg.jpg');
            .com-right{
              height: calc(100% - 40px);
              font-size: 14px;
              color: #242526;
              .com-left-one{
                width: 100%;
                height: calc(100% - 110px);
                overflow: auto;
              }
              .com-left-two{
                width: 100%;
                height: calc(100% - 81px);
                overflow: auto;
              }
              .com-left-one::-webkit-scrollbar,
              .com-left-two::-webkit-scrollbar{
                height: 0;
                width: 0;
              }
              .physician{
                width: 100%;
                min-height: 10px;
                margin-left: 5px;
                padding-top: 5px;
                span{
                  display: inline-block;
                  min-width: 32%;
                  color: #999;
                  font-size: 14px;
                  line-height: 25px;
                  display: inline-block;
                  text-align: left;
                  margin-bottom:5px;
                  small{
                      font-size: 12px;
                      color: #333;
                      font-weight: 500;
                  }
                  img{
                      width: 80px;
                      height: 50px;
                      vertical-align: middle;
                  }
                }
                  }
              .line{
                width: 97%;
                height: 10px;
                margin-left: 5px;
                border-top:2px solid #333333;
                border-bottom:2px solid #333333;
              }
              .header{
                      width: 100%;
                      min-height: 100px;
                      padding: 10px;
                      text-align: center;
                      position: relative;
                      p:nth-child(1){
                          font-size:20px;
                          color: #333;
                          font-weight: 500;
                          margin: 10px 0;
                      }
                      p:nth-child(2){
                          font-size:22px;
                          color: #333;
                          margin: 10px 0;
                          font-weight: 500;
                      }
                      p:nth-child(3){
                          border: 1px solid #999;
                          width: 70px;
                          height: auto;
                          line-height: 26px;
                          color: #333;
                          font-size: 20px;
                          position: absolute;
                          top: 15px;
                          left: 15px;
                      }
                      img{
                          width: 80px;
                          height: 80px;
                          position: absolute;
                          top: 10px;
                          right: 15px;
                      }
                      .nub{
                          padding: 15px 0 20px 0;
                          span{
                              color: #333;
                              font-size: 15px;
                              b{
                                  color: #999;
                                  font-size: 13px;
                              }
                          }
                      }
                  }

            }
          }
          .result{
                      width: 98%;
                      min-height: 160px;
                      max-height: 300px;
                      overflow-y: scroll;
                      margin-left: 5px;
                      position: relative;
                      .title{
                          color: #999;
                          font-size: 14px;
                          margin: 8px 0;
                      }
                      .dhei{
                          border-bottom:1px dashed #cccccc;
                      }
                      .text{
                          color: #333;
                          font-size: 16px;
                          font-weight: 500;
                          line-height: 26px;
                          letter-spacing: 1px;
                      }
                      .tt{
                        display: inline-block;
                          color: #333;
                          font-size: 18px;
                          font-weight: 500;
                          letter-spacing: 1px;
                      }
                      .nub{
                              font-size: 16px;
                              color: #999;
                              margin: 5px 0;
                      }
                      img{
                          width: 80px;
                          height: 80px;
                          position: absolute;
                          bottom: 25px;
                          right: 10px;
                      }
                  }
          .essential{
                width: 98%;
                min-height: 100px;
                margin-left: 8px;
                padding: 7px 0;
                border-bottom:1.5px solid #cccccc;
                box-sizing: border-box;
                span{
                    color: #999;
                    font-size: 14px;
                    line-height: 25px;
                    display: inline-block;
                    text-align: left;
                    small{
                        color: #333;
                        font-size: 14px;
                        font-weight: 500;
                    }
                }
                span:nth-child(1){
                        margin-right: 150px;
                }
                span:nth-child(2){
                        margin-right: 80px;
                }
                span:nth-child(4){
                        margin-right: 45px;
                }
                span:nth-child(6){
                        margin-right: 65px;
                }
                span:nth-child(7){
                        margin-right: 65px;
                }
                span:nth-child(8){
                    margin-right: 25px;
                }
            }
      }
.main {
	width: 98%;
	margin: 10px auto;
	border: 1px solid #f0f0f0;
	box-shadow: 0 4px 3px #ebedf8;
	border-radius: 5px;
	margin-bottom: 20px;
	.title {
		font-size: 20px;
		padding-left: 15px;
		color: #333;
		height: 40px;
		line-height: 40px;
		background: #ebedf8;
	}
	.tit {
		font-size: 16px;
		padding-left: 15px;
		color: #333;
		height: 40px;
		line-height: 40px;
		background: #ebedf8;
	}
}
</style>
